import React, { useEffect, useState } from "react";
import style from "../styles/Home.module.scss";
import "swiper/swiper.min.css";
import { Tabs, Button, Grid, AutoCenter, Image, List } from "antd-mobile";
import { Player, BigPlayButton } from "video-react";
import axios from "axios";

interface Icurrent {
  titleId?: string;
  sentence?: string;
  playUrl2?: string;
  translation?: any
}


function Home({ list }) {
  const [subtitleResps, setsubtitleResps] = useState([]);
  const [translationStr, settranslationStr] = useState("");
  const [current, setcurrent] = useState<Icurrent>({});
  
  
  const query = (page) => {
    const queryString = window.location.search;
    const locationUrl = window.location.href;
    const webHost = window.location.origin;
    const urlParams = new URLSearchParams(queryString);
    const msgId = "23455508446987308";
    const shared = urlParams.get("shared");
    let originalPage = shared === undefined || shared == null;
    const sharePageUrl = originalPage ? locationUrl + "&shared=true" : locationUrl;
    const sharedParam = "&shared=true";
    axios({
      method: "post",
      data: { "page": page, "size": 6 },
      url: "https://wechat.sixtest.xyz/api/web/searchByMsgIdV2?messageId=23455504169955371"
    }).then(function(response) {
      setsubtitleResps([
        {
          "titleId": "-mWF6HsBljXiS1xRKtr5",
          "sentence": "Chicago Wind, I presume.",
          "playUrl2": "https://qiuqiu-english.oss-cn-qingdao.aliyuncs.com/Q21tU3sBbF5tn8GnE7Mc/-mWF6HsBljXiS1xRKtr5.mp4",
          "translation": null
        },
        {
          "titleId": "_GWF6HsBljXiS1xRKtr5",
          "sentence": "If you presume that I killed  your brother then you presume wrong.",
          "playUrl2": "https://qiuqiu-english.oss-cn-qingdao.aliyuncs.com/Q21tU3sBbF5tn8GnE7Mc/_GWF6HsBljXiS1xRKtr5.mp4",
          "translation": null
        },
        {
          "titleId": "Z1oJz3sB9YqrDqLtSOns",
          "sentence": "- Captain Algren, l presume?  - Yes.",
          "playUrl2": "https://qiuqiu-english.oss-cn-qingdao.aliyuncs.com/e21GU3sBbF5tn8Gn2bJ7/Z1oJz3sB9YqrDqLtSOns.mp4",
          "translation": null
        },
        {
          "titleId": "HMUGw3sBX5REaVrnDGjq",
          "sentence": "- Katherine Watson. Nice to meet you.  - Dr. Watson, I presume.",
          "playUrl2": "https://qiuqiu-english.oss-cn-qingdao.aliyuncs.com/pW0aU3sBbF5tn8Gn3rH_/HMUGw3sBX5REaVrnDGjq.mp4",
          "translation": null
        },
        {
          "titleId": "BloJz3sB9YqrDqLtSOzs",
          "sentence": " I do not presume to understand  the course of my life.  ",
          "playUrl2": "https://qiuqiu-english.oss-cn-qingdao.aliyuncs.com/e21GU3sBbF5tn8Gn2bJ7/BloJz3sB9YqrDqLtSOzs.mp4",
          "translation": null
        }
      ]);
      
      settranslationStr("发音： [prɪˈzjuːm] ; [prɪˈzuːm] ; \n释义： v. 料想，（不肯定地）认为；假设，设想；（法律上或官方）假定，推定；擅自，冒昧；意味着；<正式>擅作主张，冒昧 ; \n"
      );
      setcurrent({
        "titleId": "-mWF6HsBljXiS1xRKtr5",
        "sentence": "Chicago Wind, I presume.",
        "playUrl2": "https://qiuqiu-english.oss-cn-qingdao.aliyuncs.com/Q21tU3sBbF5tn8GnE7Mc/-mWF6HsBljXiS1xRKtr5.mp4",
        "translation": null
      });
    });
  };
  
  
  useEffect(() => {
    query(1);
  }, []);
  
  return (
    <div className={style.page}>
      <video src={current.playUrl2}>
        您的浏览器不支持 video 标签。
      </video>
      <div>
        <Tabs>
          <Tabs.Tab title='例句' key='1'>
            <Grid className={style.action} columns={3} gap={8}>
              <Grid.Item span={2}>
                <h2>{current.sentence}</h2>
                <p>{current.translation}</p>
              </Grid.Item>
              <Grid.Item>
                <Button color='primary'>关注</Button>
              </Grid.Item>
              <Grid.Item>
                <AutoCenter>
                  <img src={`${process.env.NEXT_PUBLIC_ENV_BASE_PATH}/img/like.png`}/>
                </AutoCenter>
              
              </Grid.Item>
              <Grid.Item>
                <AutoCenter>
                  <img src={`${process.env.NEXT_PUBLIC_ENV_BASE_PATH}/img/dislike.png`}/>
                </AutoCenter>
              
              </Grid.Item>
              <Grid.Item>
                <AutoCenter>
                  <img src={`${process.env.NEXT_PUBLIC_ENV_BASE_PATH}/img/book.png`}/>
                </AutoCenter>
              
              </Grid.Item>
            </Grid>
            <List className={style.list}>
              {subtitleResps.map(o => (
                <List.Item
                  key={o.titleId}
                  prefix={
                    <img src={`${process.env.NEXT_PUBLIC_ENV_BASE_PATH}/img/ball.png`}/>
                  }
                  description={o.sentence}
                  onClick={() => {
                    setcurrent(o);
                  }}
                >
                  {o.translation}
                </List.Item>
              ))}
            </List>
            <div>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='翻译' key='2'>
            {translationStr}
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

export async function getServerSideProps(query) {
  return {
    props: {
      list: ""
    }
  };
}

export default Home;
